import React, { Component, Fragment } from "react";
// antd
import { Table, Col, Pagination, Typography, Space, Tag, Radio, notification, Select, Form } from "antd";
import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
import {CopyToClipboard} from 'react-copy-to-clipboard';

// http
import http from '../../utils/request';
const { Text } = Typography;
const { Option } = Select;


class CloudOther extends Component {
    constructor(props){
        super(props)
        this.state = {
            loading: false,

            // 分页
            total: '',
            page: 1,
            page_number: 10,

            // 搜索
            search_instance_region: null,
            search_instance_platform: null,
            search_instance_account_name: null,
            search_instance_resource_type: null,
            search_common: null,
            search_alarm_status: null,
            search_option_platform: [],
            search_option_account: [],
            search_option_region: [],
            search_option_business: [],
            search_option_resource_type: [],

            // 资源标签
            label_tag_list_option: [],
            label_tag_list_option_name: [],

            selectedRowKeys: [],

            visable_label: false,
            visable_maintain: false,
            visable_add: false,
            visible_edit: false,
            visible_delete: false,
            visable_label_division: false,
            loading_label: false,
            label_other_list: null,
            
            create_time: null,
            expire_time: null,
            other_id: null,

            days: 30,
            resource_type: null,
            search_business: null,
            
            // 表格
            dataSource: [],
            columns: [
                {title: "实例ID/名称", dataIndex: "instance_id", key: "instance_id",
                    render: (text, rowData) => {
                        return(
                            <Space direction="vertical">
                                <CopyToClipboard text={rowData.instance_id} 
                                    onCopy={() => 
                                        this.setState({copied: true},
                                        notification.open({
                                            message: '已复制到剪贴板',
                                            icon: <CheckOutlined style={{ color: 'green' }} />,
                                            duration: 2,
                                            placement: 'top',
                                        })
                                    )}
                                >
                                    <span><span style={{marginRight: "5px"}}><CopyOutlined /></span><span style={{color: "#6587FF"}}>{rowData.instance_id}</span></span>
                                </CopyToClipboard>
                                 
                                <Text >{rowData.name}</Text>
                            </Space>
                        )
                    }
                },
                {title: "资源类型", dataIndex: "resource_type", key: "resource_type",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="gold">{rowData.resource_type}</Tag>
                            </div>
                        )
                    }
                },
                {title: "过期时间", dataIndex: "expire_time", key: "expire_time"},
                {title: "云平台", dataIndex: "cloud-platform", key: "cloud-platform",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.platform}-{rowData.account_name}</Tag>                                
                            </div>
                        )
                    }
                },
                {title: "区域", dataIndex: "zone", key: "zone",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.region}</Tag>
                            </div>
                        )
                    }
                },
                {title: "事业部", dataIndex: "division", key: "division",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.division}</Tag>
                            </div>
                        )
                    }
                },
                {title: "业务线", dataIndex: "business", key: "business",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.business}</Tag>
                            </div>
                        )
                    }
                }
            ],
        }
        this.formRefLabel = React.createRef();
        this.formRefMaintain = React.createRef();
        this.formRefAdd = React.createRef();
        this.formRefEdit = React.createRef();
        this.formRefLabelDivision = React.createRef();
    }

    componentDidMount() {
        this.loadData()
        this.loadDataPlatform()
        this.loadDataBusiness()
        this.loadDataResourceType()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            days: this.state.days,
            resource_type: this.state.resource_type,
            account_name: this.state.search_instance_account_name,
            platform: this.state.search_instance_platform,
            business: this.state.search_business,
        }

        // 获取列表
        http.get('/cloud/expire', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.total,
                loading: false
            })
        }).catch()
    }

    loadDataPlatform = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/platform', {params: requestData}).then(response=>{
            const search_option_platform = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                search_option_platform.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                search_option_platform: search_option_platform
            })
        })
    }

    loadDataResourceType = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/tag', {params: requestData}).then(response=>{
            const search_option_resource_type = []
            const resp_data = response.data.data.items
            search_option_resource_type.push(<Radio.Button type="primary" value={null}>所有</Radio.Button>)
            for (let i = 0; i < resp_data.length; i++) {
                console.log(resp_data[i])
                search_option_resource_type.push(<Radio.Button type="primary" value={resp_data[i].code}>{resp_data[i].name}</Radio.Button>)
            }
            this.setState({
                search_option_resource_type: search_option_resource_type
            })
        })
    }

    loadDataBusiness = () => {
        const requestDataBusiness = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/business', {params: requestDataBusiness}).then(response=>{
            const resp_data = response.data.data.items
            const search_option_business = []
            for (let i = 0; i < resp_data.length; i++) {
                search_option_business.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)

            }
            this.setState({
                search_option_business: search_option_business,
            })
        })
    }

    // 搜索切换云平台
    onChangePlatform = (value) => {
        if (value) {
            this.setState({
                search_instance_platform: value
            })

            const requestData = {
                'page': 1,
                'limit': 1000,
                'platform': value
            }
    
            http.get('/cloud/account', {params: requestData}).then(response=>{
                const search_option_account = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_account.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_account: search_option_account,
                    search_instance_account_name: null,
                }, () => this.loadData())
            })
        } else {
            this.setState({
                search_option_account: '',
                search_instance_platform: null,
                search_instance_account_name: null,
            }, () => this.loadData())
        }
    }

    // 搜索云账户
    onChangeAccountName = (value) => {
        this.setState({
            search_instance_account_name: value ? value : null
        }, () => this.loadData())
    }

    // 搜索业务线
    onChangeBusiness = (value) => {
        this.setState({
            search_business: value ? value : null
        }, () => this.loadData())
    }

    changeDays = (days) => {
        this.setState({days: days}, () => this.loadData())
    }

    changeResourceType = (resourceType) => {
        this.setState({resource_type: resourceType}, () => this.loadData())
    }

    render(){
        const { loading, columns, dataSource, page, total, search_option_resource_type, search_option_platform, search_option_account, search_option_business } = this.state
        // const rowSelection = {
        //     selectedRowKeys,
        //     onChange: this.onSelectChange,
        // }
        var myStyle = {margin: '20px'}
        var myStyle1 = {marginTop: '25px'}
        var myStyleForm = {marginRight: '10px', marginTop: '5px'}

        return (
            <Fragment>

                <Form layout="inline" onFinish={this.onFinishSearch}>  

                    <Form.Item name="platform" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="云平台"
                            optionFilterProp="children"
                            onChange={this.onChangePlatform}
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {search_option_platform}
                        </Select>
                    </Form.Item>

                    <Form.Item name="account_name" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="云账户"
                            onChange={this.onChangeAccountName}
                            >
                            {search_option_account}
                        </Select>                      
                    </Form.Item>

                    <Form.Item name="business" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="业务线"
                            onChange={this.onChangeBusiness}
                            >
                            {search_option_business}
                        </Select>                      
                    </Form.Item>
                </Form>

                <div style={myStyle1}>
                    <Radio.Group onChange={(e) => this.changeDays(e.target.value)} defaultValue="30">
                        <Radio.Button type="primary" value="7">7天内到期</Radio.Button>
                        <Radio.Button type="primary" value="15">15天内到期</Radio.Button>
                        <Radio.Button type="primary" value="30">30天内到期</Radio.Button>
                        <Radio.Button type="primary" value="60">2个月内到期</Radio.Button>
                        <Radio.Button type="primary" value="90">3个月内到期</Radio.Button>
                        <Radio.Button type="primary" value="180">6个月内到期</Radio.Button>
                    </Radio.Group>
                </div>

                <div style={myStyle1}>
                    <Radio.Group onChange={(e) => this.changeResourceType(e.target.value)} defaultValue={null}>
                        {search_option_resource_type}
                    </Radio.Group>
                </div>
                
                {/* <div style={myStyle1}>注：
                    <div>抖店云：ElasticSearch没有过期时间</div>
                </div> */}

                <div style={myStyle1}>
                    
                </div>

                <Table
                    size="small"
                    pagination={false} 
                    // rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: '70vw' }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            pageSize='10000'
                            current={page}
                            total={total}
                            showSizeChanger
                            // showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

            </Fragment>
        )
    }
}

export default CloudOther;